<template>
	<div class="enroll">
		<header>
			<i class="el-icon-notebook-2"><span> 用户注册</span></i>
			<hr/>
		</header>
		<div class="div2">
			<aside>
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
				:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
				action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				<span>点击上传图片</span>
				</el-upload>
			</aside>
			<el-form ref="user" :model="user" :rules="rules" label-width="250px">
				<el-form-item label="账号">
					<el-input v-model="user.account"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password1">
					<el-input type="password" v-model="user.password1" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码确认" prop="password2">
					<el-input type="pasword" v-model="user.password2"  autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="姓名昵称">
					<el-input v-model="user.nickname"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="user.phone"></el-input>
				</el-form-item>
				<el-form-item label="vip客户">
					<el-select v-model="user.vip" placeholder="请选择身份">
						<el-option label="普通用户" value="0"></el-option>
						<el-option label="vip用户" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="地址">
					<el-input type="textarea" placeholder="请输入您的地址信息" v-model="user.addr"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="add()"><i class="el-icon-user"></i> 注册新账号</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name:'UserEnroll',
	data(){
		var validatePass = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请输入密码'));
		        } else {
		          if (this.user.password2 !== '') {
		            this.$refs.ruleForm.validateField('password2');
		          }
		          callback();
		        }
		      };
		      var validatePass2 = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请再次输入密码'));
		        } else if (value !== this.user.password1) {
		          callback(new Error('两次输入密码不一致!'));
		        } else {
		          callback();
		        }
		      };
		return{
			user:{
				nickname :'',
				account : '',
				password1 : '',
				password2 : '',
				role : '',
				phone : '',
				vip : '',
				addr : '',
				mypic : ''
			},
			imageUrl:"",
			fileList:[],
			rules: {
			          password1: [
			            { validator: validatePass, trigger: 'blur' }
			          ],
			          password2: [
			            { validator: validatePass2, trigger: 'blur' }
			          ],
			}
		}
	},
	methods: {
	     handleChange: function(file, fileList) {
	                      this.fileList = fileList;
	                 },
	     beforeAvatarUpload(file) {
	                     const isJPG = file.type === 'image/jpeg';
	                     const isLt2M = file.size / 1024 / 512;
	     
	                     if (!isJPG) {
	                         this.$message.error('上传图片只能是 JPG 格式!');
	                     }
	                     if (!isLt2M) {
	                         this.$message.error('上传图片大小不能超过 0.5MB!');
	                     }
	                     return isJPG && isLt2M;
	     },
		 add(){
			 let fd = new FormData();
			 let k =this.fileList;
			 fd.append("nickname", this.user.nickname);
			 fd.append("account", this.user.account);
			 fd.append("mypic", this.user.mypic);
			 console.log(this.user.mypic);
			 fd.append("phone", this.user.phone);
			 fd.append("password", this.user.password1);
			 fd.append("role", this.user.role);
			 fd.append("vip", this.user.vip);
			 fd.append("addr", this.user.addr);
			 console.log(this.user);
			 if(k.length>0 && k[0].raw !=null){
			 	fd.append("mypic",k[0].raw);
			 }
			 console.log(fd);
			 this.$postf("/api/public/addUser",fd).then((resp)=>{
			 	this.user =resp.data.data;
			 	console.log(this.user);
			 	
			 	this.imageUrl =`${this.ip}/api/public/showimg/${resp.data.data.img}`;
			 	
			 	this.$message({
			 		message:resp.data.msg,
			 		type:'success'
			 	})
			 })
		 }
	},
}
</script>

<style scoped>
.enroll{
	width: 80%;
	margin: 0 auto;
}
.enroll header{
	width: 100%;
	height: 50px;
	margin-top: 10px;
	text-align: center;
}
.enroll header i{
	font-size: 16px;
	font-weight: 480;
}
.div2{
	width: 100%;
	height: 780px;
	margin-top: 30px;
	display: flex;
}
.div2 aside{
	width: 35%;
	height: 50%;
	border: 1px dashed #c3c3c3;
}
.div2 aside i{
	margin-top: 60%;
	margin-left: 170px;
	font-size: 20px;
}
.div2 aside img{
	width: 100%;
	height: 100%;
}
.div2 .el-button{
	height: 50px;
	margin-left: 320px;
	font-size: 18px;
}
.div2 .el-button i{
	color: red;
	font-size: 20px;
}
</style>
